<template>
  <div class="page">
    <div :id="pageId" class="graph-container" style="position: relative;"></div>
  </div>
</template>


<script>
import G6 from "@antv/g6/build/g6";
import { initBehavors } from "@/zstp/behavior";
import Grid from "@antv/g6/build/grid";
export default {
  data() {
    return {
      pageId: "graph-container",
      graph: null,
      pageHeight:0,
      pageWidth:0,
    };
  },
  props: {
    height: {
      type: Number,
      default: 0
    },
    width: {
      type: Number,
      default: 0
    },
    data: {
      type: Object,
      default: () => {}
    },
    uploadJsonData:{
      type: Object,
      default: () => {}
    }
  },
  watch:{
    uploadJsonData:{
      handler(val){
        if(Object.keys(val).length>0){
          this.graph.clear()
          const jsonData=this.getRandomPosition(val)
          this.graph.read(jsonData);
        }
      }
    }

  },
  created() {
    initBehavors();
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      this.pageHeight =  this.height - 42
      this.pageWidth =  this.width - 400

      this.graph = new G6.Graph({
        container: "graph-container",
        height: this.pageHeight,
        width: this.pageWidth,
        modes: {
          // 支持的 behavior
          default: [
            "drag-canvas",// 画布拖拽
            "zoom-canvas",// 画布缩放
            "hover-node", // 节点悬停
            "select-node",// 节点选择
            "hover-edge",// 边悬停
            "keyboard",// 键盘交互
            "customer-events",// 自定义事件
            "add-menu"// 添加菜单
          ],
          mulitSelect: ["mulit-select"], // 多选
          addEdge: ["add-edge"],// 添加边
          moveNode:[ "drag-item"] // 拖拽节点
        },
      });
      this.grid = new Grid();
      this.graph.addPlugin(this.grid);
      const { editor, command } = this.$parent;
      editor.emit("afterAddPage", { graph: this.graph, command });

      this.readData();
    },
    readData() {
      let data = this.data;
      //const obj='{"nodes":[{"name":"知识点","label":"知识点","size":["120"],"type":"node","x":0,"y":0,"shape":"circleNode","color":"#D9D919","backgroundColor":"#D9D919","inPoints":[[0,1],[0,-1],[1,0],[-1,0]],"offsetX":0,"offsetY":0,"id":"node2"},{"name":"属性","label":"属性","size":["60"],"type":"node","x":0,"y":0,"shape":"circleNode","color":"#7093DB","backgroundColor":"#7093DB","inPoints":[[0,1],[0,-1],[1,0],[-1,0]],"offsetX":41,"offsetY":16,"id":"node13"},{"name":"属性","label":"属性","size":["60"],"type":"node","x":0,"y":0,"shape":"circleNode","color":"#7093DB","backgroundColor":"#7093DB","inPoints":[[0,1],[0,-1],[1,0],[-1,0]],"offsetX":55,"offsetY":16,"id":"node24"},{"name":"属性","label":"属性","size":["60"],"type":"node","x":0,"y":0,"shape":"circleNode","color":"#7093DB","backgroundColor":"#7093DB","inPoints":[[0,1],[0,-1],[1,0],[-1,0]],"offsetX":121,"offsetY":20,"id":"node35"}],"edges":[{"id":"edge103","source":"node2","target":"node13","sourceId":"node2","targetId":"node13","start":{"x":0,"y":60},"end":{"x":0,"y":-30},"shape":"customEdge","type":"edge","startPoint":{"x":568.0703815556433,"y":113.47604805083132},"endPoint":{"x":286.70005557938646,"y":214.67736420577924}},{"id":"edge188","source":"node2","target":"node24","sourceId":"node2","targetId":"node24","start":{"x":0,"y":60},"end":{"x":0,"y":-30},"shape":"customEdge","type":"edge","startPoint":{"x":585.6507805853935,"y":138.9552927469857},"endPoint":{"x":507.8372097875289,"y":229.83245572259398}},{"id":"edge269","source":"node2","target":"node35","sourceId":"node2","targetId":"node35","start":{"x":0,"y":60},"end":{"x":0,"y":-30},"shape":"customEdge","type":"edge","startPoint":{"x":670.4083751354959,"y":132.97911289103445},"endPoint":{"x":786.108174518469,"y":234.84524060865206}}],"groups":[]}'
      if (data) {
        this.graph.read(data);
      }
      // let objData=JSON.parse(obj)
      // this.graph.read(objData);
    },
    // 生成随机坐标
    getRandomPosition(jsonData){
      const positions = [];
      // 节点间最小距离
      const minDistance=20;
      const nodes=jsonData.nodes
      while (positions.length < nodes.length) {
        const x = Math.random() * (this.pageWidth - minDistance * 2) - 60;
        const y = Math.random() * (this.pageHeight - minDistance * 2) - 60;

        // 检查新的坐标是否与已存在的节点坐标重叠
        if (positions.every((pos, index) => {
          const distance = Math.sqrt(
              Math.pow(pos[0] - x, 2) + Math.pow(pos[1] - y, 2)
          );
          return distance > 60 + positions[index][2];
        }))
        {
          positions.push([x, y, 60]);
        }
      }
      for(var i=0;i<positions.length;i++){
        this.$set(nodes[i],'x',positions[i][0])
        this.$set(nodes[i],'y',positions[i][1])
      }
      this.$set(jsonData,'nodes',nodes);
      return jsonData;
    },
  }
};
</script>

<style scoped>
.page{
  margin-left:200px;
  /*margin-right: 200px;*/
}
</style>
